<style lang="less">
.vertical-center-modal {
    .ivu-modal {
        margin-top: 10%;
    }
}
</style>
<template>
    <div>
        <Form ref="formValidate" :model="tempData" :label-width="80" :rules="ruleValidate">
            <FormItem label="姓名" prop="Name">
                <Input v-model="tempData.Name" />
            </FormItem>
            <!-- <FormItem label="手机号" prop="Phone">
                <Input v-model="tempData.Phone" />
            </FormItem>-->
            <FormItem label="医保号" prop="MedicalCardNo">
                <Input v-model="tempData.MedicalCardNo" />
            </FormItem>
            <!-- <FormItem label="生日" prop="Birthday">
                <DatePicker type="date" placeholder="请选择生日" v-model="tempData.Birthday"></DatePicker>
            </FormItem>-->

            <FormItem label="性别" prop="Sex">
                <RadioGroup v-model="tempData.Sex">
                    <Radio :label="1">男</Radio>
                    <Radio :label="2">女</Radio>
                </RadioGroup>
            </FormItem>
            <!-- <FormItem>
                <treeselect v-model="tempData.ParentId" :searchable="false" :clearable="false" placeholder="请选择所属部门" :options="treeData" />
            </FormItem>-->
            <FormItem v-if="Id == 0" label="期初账目" prop="Balance">
                <Input type="number" v-model="tempData.Balance">
                    <span slot="append">元</span>
                </Input>
                <div style="padding-top:5px">
                    <Tag type="dot" color="error" size="large">
                        <span style="font-size:14px">每年初始化300元</span>
                    </Tag>
                </div>
            </FormItem>
            <FormItem label="部门" prop="DepartmentId">
                <treeselect v-model="tempData.DepartmentId" :searchable="false" placeholder :clearable="false" :options="selectTreeData" />
            </FormItem>
            <!-- <FormItem label="地址" prop="Address">
                <Input type="textarea" v-model="tempData.Address" />
            </FormItem>-->
            <FormItem label="备注" prop="Remark">
                <Input type="textarea" v-model="tempData.Remark" />
            </FormItem>
        </Form>
        <div class="div-footer">
            <Button type="text" @click="cancel()">取消</Button>
            <Button type="primary" :loading="loading" @click="SaveCustomer">确定</Button>
        </div>
    </div>
</template>

<script>

import { GetCustomer, SaveCustomer } from '@/api/customer'
import Treeselect from '@riophae/vue-treeselect'
import { GetTreeDepartment } from '@/api/department'
import { InitDepartmentTree } from '../../libs/tools'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
    name: 'customeredit',
    props: ['Id'],
    components: { Treeselect },
    data() {
        return {
            selectTreeData: [],
            ruleValidate: {
                Name: [
                    { required: true, message: '姓名不能为空', trigger: 'blur' }
                ],
                MedicalCardNo: [
                    { required: true, message: '医保号不能为空', trigger: 'blur' }
                ],
                // Sex: [
                //     { required: true, message: '请选择性别', trigger: 'change' }
                // ],
                // Birthday: [
                //     { required: true, type: 'date', message: '请选择生日', trigger: 'change' }
                // ],
                DepartmentId: [{ required: true, type: 'number', message: '请选择部门', trigger: 'blur' }],
            },
            loading: false,
            tempData: {
                Name: '',
                Sex: 1,
                Balance: 300
            }
        }
    },
    computed: {},
    methods: {
        cancel() {
            this.$emit('on-success', 0)
        },
        GetCustomer() {
            let vm = this
            GetCustomer(vm.Id).then((res) => {
                var data = res.data
                if (data.StatusCode == 200) {
                    vm.tempData = data.Data
                } else {
                    vm.$Notice.error({
                        title: data.Errors
                    })
                }
            })
        },
        SaveCustomer() {
            let vm = this
            vm.$refs['formValidate'].validate((valid) => {
                if (valid) {
                    vm.loading = true
                    SaveCustomer(vm.tempData).then((res) => {
                        vm.loading = false
                        const data = res.data
                        if (data.StatusCode == 200) {
                            vm.$Message.success({ title: '提示', content: '保存成功' })
                            vm.$emit('on-success', 1)
                        } else {
                            vm.$Message.error({ title: '提示', content: data.Errors })
                        }
                    })
                }
            })
        },
        GetTreeDepartment() {
            let vm = this
            GetTreeDepartment(0).then((res) => {
                const data = res.data
                if (data.StatusCode == 200) {
                    this.selectTreeData = InitDepartmentTree(data.Data)
                    this.treeData = [
                        {
                            id: 0,
                            label: '全部',
                            title: '全部',
                            value: 0,
                            expand: true,
                            children: this.selectTreeData
                        }
                    ]
                } else {
                    vm.$Message.error({ title: '提示', content: data.Errors })
                }
            })
        },

    },
    mounted() {
        if (this.Id > 0) {
            this.GetCustomer()
        }
        this.GetTreeDepartment()
    }
}
</script>

<style></style>
